<template>
  <ScreenModal v-model="isVisible" title="抓拍信息" :width="500">
    <div class="headers">
      <div>
        <p class="photo">抓拍照片:</p>
        <div v-loading="loading" element-loading-text="抓拍照片生成中">
          <img :src="imgBefores" alt="" class="imgs" />
        </div>
        <!-- <img @click="showPic(data.imgBefores)" :src="data.imgBefores || imgbg" alt="" class="imgs" /> -->
      </div>
      <!--      <div class="flexCenter">-->
      <!--        <p class="photo">抓拍类型:</p>-->
      <!--          <el-radio-->
      <!--            v-for="item in typeList"-->
      <!--            :key="item.name"-->
      <!--            v-model="type"-->
      <!--            :label="item.name">-->
      <!--            {{ item.name }}-->
      <!--          </el-radio>-->
      <!--      </div>-->
      <div class="flexCenter">
        <p class="photo">抓拍时间:</p>
        <p>{{ data.gatherTime }}</p>
      </div>
      <div class="flexCenter">
        <p class="photo">所属街办:</p>
        <p>{{ data.street }}</p>
      </div>
      <div class="flexCenter">
        <p class="photo">抓拍地址:</p>
        <p>{{ data.address }}</p>
      </div>
      <div class="NoFlex">
        <p class="photo">问题描述:</p>
        <el-input type="textarea" rows="5" class="textarea" placeholder="请输入内容" v-model="data.content">
        </el-input>
      </div>
      <div class="flexCenter spaceBt">
        <el-button round @click="close">取消</el-button>
        <el-button round @click="confirm">确定</el-button>
      </div>
    </div>
    <!-- <div class="showPic" v-show="showPicUrl" @click="hidePic">
      <el-image :src="showPicUrl" fit="cover"  alt="" />
    </div> -->
  </ScreenModal>
</template>

<script>
import { ZhanDaoJingYing } from '@/api'
// import EZUIKit from 'ezuikit-js' //萤石云
// let EZUIKIt = null

export default {
  name: 'popup',
  props: {
    videoData: {
      type: Object,
    }, //页面类型
  },
  data() {
    return {
      isVisible: false,
      data: {},
      imgBefores: '',
      type: '事件',
      typeList: [
        { name: '事件', type: '事件' },
        { name: '部件', type: '部件' },
      ],
      // imgbg: require('../assets/images/videoimg.png'),
      showPicUrl: '',
      loading: true
    }
  },
  // computed: {},
  // mounted() {},
  methods: {
    open(data) {
      this.loading = true
      this.data = {
        ...data,
        address: data.name,
        gatherTime: this.toTime(new Date())
      }
      this.capturePicture(data)
      this.isVisible = true
    },
    close() {
      this.data = {}
      this.loading = true
      this.isVisible = false
    },
    confirm() {
      // if (!this.data.imgBefores) {
      //   return this.$message.warning('图片加载中，请等待')
      // }
      const param = {
        "sourceId": 5,
        "source": "手动抓拍",
        "gridUserId": 0,
        "gridUserName": "手动抓拍",
        "device": this.data.siteNumber,
        "type": this.type,
        "imgBefores": this.imgBefores,
        "gatherTime": this.data.gatherTime,
        "street": this.data.street,
        "content": this.data.content,
        "address": this.data.address,
        "coordinate": this.data.lon ? this.data.lon + ',' + this.data.lat : '',
      }
      ZhanDaoJingYing.zhuaPaiConfirm(param).then(res => {
        // this.$message1.success('抓拍成功')
        this.close()
      })

    },
    capturePicture(data) {
      ZhanDaoJingYing.zhuaPaiUrl({
        deviceSerial: data.siteNumber
      }).then(res => {
        this.loading = false
        this.imgBefores = res.data
        // this.$nextTick(() => {
        //   this.$refs.jianKongView.open(param)
        // })
      })
    },
    toTime: (value) => {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      return year + "-" + month + "-" + day + ' ' + hours + ":" + minutes;
    },
    // showPic(url) {
    //   if (url) {
    //     this.showPicUrl = url
    //   }
    // },
    // hidePic() {
    //   this.showPicUrl = ''
    // }

  },
}
</script>

<style lang="less" scoped>
.headers {
  padding-top: 20px;
  z-index: 2000;

  .spaceBt[data-v-60fdd13e] {
    background-color: transparent;
  }

  >div {
    margin-top: 20px;
    display: flex;

    &:nth-child(1) {
      img {
        margin-left: 10px;
      }
    }

    // &:nth-child(2) {
    //   align-items: center;
    //   p {
    //     margin-right: 20px;
    //   }
    // }
    // &:nth-child(3) {
    //   align-items: center;
    //   p {
    //     margin-right: 20px;
    //   }
    // }
    // &:nth-child(4) {
    //   align-items: center;
    //   p {
    //     margin-right: 20px;
    //   }
    // }
    // &:nth-child(5) {
    //   align-items: center;
    //   p {
    //     margin-right: 20px;
    //   }
    // }
  }

  .spaceBt {

    /*background: rgba(58,113,174,0.4);*/
    button {
      width: 140px;
      height: 32px;
      border-radius: 16px;
      font-size: 16px;
      font-family: Noto Sans S Chinese;
      color: #feffff;
      font-weight: 400;
      outline: none;
      line-height: 32px;
      padding: 0;
    }

    button {
      &:nth-child(1) {
        background: rgba(31, 73, 135, 0.3);
        border: 1px solid #219eff;
      }

      &:nth-child(2) {
        border: 0;
        background: #219eff;
      }
    }
  }

  .NoFlex {
    display: flex;
    flex-direction: column;

    .textarea {
      width: 298px;
      height: 117px;
      margin-top: 10px;
      // background: rgba(158, 213, 255, 0.2);
      // border: 1px solid #41acfe;
    }
  }

  .flexCenter {
    align-items: center;

    p {
      margin-right: 10px;

      &:nth-child(2) {
        color: #feffff;
      }
    }
  }

  .photo {
    font-size: 16px;
    font-family: Noto Sans S Chinese;
    font-weight: 400;
    color: #9ed5ff;
  }

  .imgs {
    width: 220px;
    height: 140px;
    border: 1px solid #9ed5ff;
  }
}

.showPic {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
}
</style>
<style lang="less">
.select {
  .el-input__inner {
    width: 220px;
    height: 30px;
    background: rgba(158, 213, 255, 0.2);
    border: 1px solid #41acfe;
    padding-top: 2px;
  }

  .el-input__icon {
    line-height: 30px;
  }
}

.textarea {
  .el-textarea__inner {
    background: rgba(158, 213, 255, 0.2);
  }
}
</style>
